<template>
  <component :is="tag" :command="command" @click="onClick" />
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import type { Component } from 'vue';
  import { ElMessageBox } from 'element-plus';
  import { Confirm } from './button';
  import { CommandOptions } from '../core';
  import { ButtonName, getButton } from './buttons';

  const props = defineProps<{
    command: CommandOptions;
    confirm?: Confirm;
    species?: ButtonName;
  }>();

  const emit = defineEmits(['command']);

  const tag = computed<Component>(() => getButton(props.species || 'common'));

  function onClick() {
    if (!props.command) return;
    if (props.confirm) {
      const confirm = props.confirm;
      ElMessageBox.confirm(confirm.message, confirm.title, confirm.options).then(() => {
        emit('command', props.command);
      });
    } else {
      emit('command', props.command);
    }
  }
</script>

<style scoped></style>
